<template>
  <div class="root">
    <acme-app-bar title="Input"></acme-app-bar>
    
    <div class="ui-title">基础用法</div>
    <acme-input label="收货人" v-model="value1"/>

    <div class="ui-title">自定义类型</div>
    <acme-cell-group>
      <acme-input label="联系方式" v-model="value3" pr="请输入联系方式"/>
      <acme-input label="密码" v-model="value5" type="password" pr="请输入密码"/>
    </acme-cell-group>

    <div class="ui-title">只读</div>
    <acme-input label="状态" v-model="value6" disabled/>

    <div class="ui-title">对齐方式</div>
    <acme-cell-group>
      <acme-input label="收货人" v-model="value2" pr="请输入收货人" text-align="right"/>
      <acme-input label="收货地址" v-model="value4" pr="请输入收货地址" text-align="right"/>
    </acme-cell-group>

    <div class="ui-title">卡片风格</div>
    <acme-cell-group :radius="10" style="width: 95%;">
      <acme-input label="收货人" v-model="value8" pr="请输入收货人"/>
      <acme-input label="联系方式" v-model="value9" pr="请输入联系方式"/>
      <acme-input label="收货地址" v-model="value10" pr="请输入收货地址"/>
    </acme-cell-group>
  </div>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeInput from "@/components/acme-design/input"
  export default {
    components: {
      AcmeCellGroup,
      AcmeInput,
    },
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '12345678',
        value6: '禁止修改',
        value7: '',
        value8: '',
        value9: '',
        value10: '',
        value11: '',
      };
    },
  };
</script>


<style lang="scss" scoped>
  .root {
    padding-bottom: 20px;
  }
</style>